<template>
    <view class="custom-tab-bar">
      <!-- 首页 -->
      <view 
        class="tab-item"
        :class="{ 'active': current === 0 }"
        @click="switchTab(0)"
      >
        <image 
          class="tab-icon" 
          :src="current === 0 ? '/static/tabar/home-active.png' : '/static/tabar/home.png'" 
        />
        <text class="tab-text">首页</text>
      </view>
      
      <!-- 咨询 -->
      <view 
        class="tab-item"
        :class="{ 'active': current === 1 }"
        @click="switchTab(1)"
      >
        <image 
          class="tab-icon" 
          :src="current === 1 ? '/static/tabar/consultation-active.png' : '/static/tabar/consultation.png'" 
        />
        <text class="tab-text">咨询</text>
      </view>
      
      <!-- 中间突起的发布按钮 -->
      <view class="center-tab-item" @click="handleCenterClick">
        <view class="center-icon-wrapper">
          <image class="center-icon" src="/static/tabar/publish.png" />
        </view>
      </view>
      
      <!-- 消息 -->
      <view 
        class="tab-item"
        :class="{ 'active': current === 3 }"
        @click="switchTab(3)"
      >
        <image 
          class="tab-icon" 
          :src="current === 3 ? '/static/tabar/message-active.png' : '/static/tabar/message.png'" 
        />
        <text class="tab-text">消息</text>
      </view>
      
      <!-- 我的 -->
      <view 
        class="tab-item"
        :class="{ 'active': current === 4 }"
        @click="switchTab(4)"
      >
        <image 
          class="tab-icon" 
          :src="current === 4 ? '/static/tabar/mine-active.png' : '/static/tabar/mine.png'" 
        />
        <text class="tab-text">我的</text>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  
  const current = ref(0)
  
  // 获取当前页面路径
  const getCurrentPagePath = () => {
    const pages = getCurrentPages()
    return pages[pages.length - 1].route
  }
  
  // 初始化时设置当前选中的tab
  onShow(() => {
    const path = getCurrentPagePath()
    switch(path) {
      case 'pages/home/index':
        current.value = 0
        break
      case 'pages/consultation/index':
        current.value = 1
        break
      case 'pages/message/index':
        current.value = 3
        break
      case 'pages/mine/index':
        current.value = 4
        break
    }
  })
  
  // 切换 Tab
  const switchTab = (index: number) => {
    current.value = index
    let url = ''
    switch(index) {
      case 0:
        url = '/pages/home/index'
        break
      case 1:
        url = '/pages/consultation/index'
        break
      case 3:
        url = '/pages/message/index'
        break
      case 4:
        url = '/pages/mine/index'
        break
    }
    uni.switchTab({
      url: url
    })
  }
  
  // 中间按钮点击事件
  const handleCenterClick = () => {
    uni.navigateTo({
      url: '/pages/publish/index'
    })
  }
  </script>
  
  <style lang="scss">
  .custom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: $uni-bg-color;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    z-index: 999;
    
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 20%;
      height: 100%;
      
      &.active {
        .tab-text {
          color: #4fb7ff;
        }
      }
      
      .tab-icon {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 8rpx;
      }
      
      .tab-text {
        font-size: 24rpx;
        color: #cccccc;
      }
    }
    
    .center-tab-item {
      position: relative;
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .center-icon-wrapper {
        position: absolute;
        bottom: 40rpx;
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2rpx 20rpx rgba(79, 183, 255, 0.3);
        
        .center-icon {
          width: 110rpx;
          height: 110rpx;
        }
      }
    }
  }
  </style>